<template>
	<view class="main" :style="{ 'background-image': `url(${bg})` }">
		<loginVue :Visible="show" @isModal="isModal" />
		<view class="title">
			<title :title="title"></title>
		</view>
		<view class="box">
			<view class="info">
				<view class="info-img">
					<!-- <u-avatar :src="info.img || infoImg"></u-avatar> -->
					<image :src="info.photo || infoImg" mode=""></image>

					<view class="info-text" v-if="info.name!=''">
						<text>{{
							info.name
						}}</text>
						<view class="" @click="edit">
							编辑资料
							<u-icon size="24" color="#808080" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="login-btn" v-else @click="login">
						未登录
					</view>

				</view>
				<view class="info-right">

				</view>
			</view>
			<view class="register lastregister">
				<view class="register-title">
					我的订单
					<view class="title-right" @click="all">
						<text class="right-box">全部订单</text>

						<u-icon size="24" color="#808080" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="outpatient-box">
					<u-grid :col="5">
						<u-grid-item v-for="(item, index) in myList" :index="item.package" :key="index"
							@click="skip(item, index)">
							<!-- <u-icon :name="item" :size="46"></u-icon> -->
							<u-badge v-if="item.count" :count="item.count" :offset="[20, 20]"></u-badge>
							<image :src="item.image" mode=""></image>
							<text class="grid-text">{{ item.title }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="register lastregister">
				<view class="register-title">
					我的医疗
				</view>
				<view class="outpatient-box">
					<u-grid :col="4">
						<u-grid-item v-for="(item, index) in myTreatment" :index="item.package" :key="index"
							@click="skip(item, index)">
							<!-- <u-icon :name="item" :size="46"></u-icon> -->
							<image :src="item.image" mode=""></image>
							<text class="grid-text">{{ item.title }}</text>
						</u-grid-item>
					</u-grid>
				</view>

			</view>
			<view class="register">
				<view class="list" v-for="(item, index) in list" :key="index" @click="skip(item, index)">
					<view class="list-item" v-if="item.title != '客服咨询'">
						<image :src="item.image" mode=""></image>
						<text>{{item.title}}</text>
					</view>
					<view class="connection-box " v-else>
						<button class="swipers-btn " open-type="contact">联系客户</button>
						<view class="list-item" >
							<image :src="item.image" mode=""></image>
							<text>{{item.title}}</text>
						</view>
					</view>
					<view class="right">
						<image class="right-img" :src="right" mode=""></image>
						
					</view>
				</view>
			</view>
			<!-- <view class="loginbtn" v-if="loginBtn=='退出登录' && token!=''" @click="open">
				<view class="btn">
					{{loginBtn}}
				</view>
			</view> -->
			<!-- <button v-else open-type="getPhoneNumber" class="login_button" @getphonenumber="login"
				v-show="!logged">{{loginBtn}}</button> -->
		</view>

	</view>
</template>

<script>
	import {
		getregistration,
		applyGoods,
		delgoodsOrder,
		goodsOrderList,
		setGoodspay
	} from '../../service/api.js'
	import loginVue from "../../components/login.vue";
	import {
		toast,
		getStore,
		setStore,
		removeStore
	} from "@/utils/index";
	import title from '../../components/title.vue';

	import {
		listByIds,
		logout,
		getPhone,
		wxlogin
	} from '../../service/api.js';
	import config from "../../utils/config";
	export default {

		data() {
			return {
				token: "",
				infoImg: config.ossHost + "2025/01/06/0f26de75078d48d0853a65ff9709b6e0.png",
				params: {

					status: "107",
				},
				//背景大图
				right:config.ossHost +"2025/01/09/ee1bcb20aa0b4ae5a14ad5dce09c3ba6.png",
				bg: config.ossHost + '2024/12/31/784134efcd93449e923c5faefbd5a290.png',
				loginBtn: "登录",
				content: "您尚未登录，请登录",
				show: false,
				title: "个人中心",

				info: {
					img: config.ossHost + "2025/01/06/0f26de75078d48d0853a65ff9709b6e0.png",
					name: ''
				},
				url: config.host,
				myTreatment: [{
						image: config.ossHost + '2024/12/29/339b98339b7c4c68961abdbdcf8e2e5a.png',
						title: '我的挂号',
						package: 'register'
					},
					{
						image: config.ossHost + '2024/12/29/461714031e1142c3b3b58e2246bdfd7d.png',
						title: '我的报告',
						package: ''
					},
					{
						image: config.ossHost + '2024/12/29/81cb3917f87c45c783356eb7b2e8c0f9.png',
						title: '就诊人管理',
						package: 'idCard'
					},
					{
						image: config.ossHost + '2024/12/29/d738584e259542a396ff242a16b9c654.png',
						title: '意见反馈',
						package: 'Complaint'
					}
				],
				myList: [{
						image: config.ossHost + '2024/12/29/8ff2dbce67aa4bba9874a814e363445a.png',
						title: '购物车',
						package: 'shopCar'
					},
					{
						image: config.ossHost + '2024/12/29/9b55f82d049c4d00ba6b7a01e9a9d35e.png',
						title: '待付款',
						package: 'order',
						status: '100'
					},

					{
						image: config.ossHost + '2024/12/29/608df445139b4fee86611a9d3b99b09f.png',
						title: '待收货',
						package: 'order',
						count: 0,
						status: '100'
					},
					{
						image: config.ossHost + '2024/12/29/345a0ae9197f4df7b038a45cf6b76cb6.png',
						title: '待评价',
						package: 'order',
						status: '100'
					},
					{
						image: config.ossHost + '2025/01/09/9a156ec7f8d74e69a62a98c6074bc85d.png',
						title: '退款/售后',
						package: 'order',
						status: '100'
					},

				],
				list: [{
						image: config.ossHost + '2024/12/29/b55f3c8056604ae7b8c68a5c228aa8fb.png',
						title: '客服咨询',
						package: ''
					},
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					// 	title: '帮助中心',
					// 	package: ''
					// },
					{
						image: config.ossHost + '2024/12/29/9cb1bd74ec05465a8725fa62fae5db26.png',
						title: '地址管理',
						package: 'address'
					},
					{
						image: config.ossHost + '2024/12/29/a0a4ccc1961d4834ad95c1bb9a64b20d.png',
						title: '浏览记录',
						package: 'history'
					},
					{
						image: config.ossHost + '2024/12/29/80a1251d8151439e93573f8aacdc3374.png',
						title: '设置',
						package: 'seetting'
					}
				]
			}
		},
		components: {
			title,
			loginVue
		},
		onShow() {

			this.token = getStore("token") || "";
			try {
			  // 尝试解析获取的 "info"
			  this.info = JSON.parse(getStore("info")) || {}; 
			  this.getOrderList();
			} catch (error) {
			  // 如果解析失败，返回空对象
			   this.info={};
			  this.info.name = ''; 
			}
			console.log(this.info,"这里是否进行了")
			if (!this.token) {
				this.show = true
			}
			

		},
		methods: {
			async getOrderList() {
				let res = await goodsOrderList();
				this.myList[1].count= res.rows.reduce((acc, row) => row.status == 100 ? acc + 1 : acc, 0);
				console.log(this.myList[1].count,"11111111111111")
				this.myList[2].count= res.rows.reduce((acc, row) => row.status == 107 ? acc + 1 : acc, 0);
				this.myList[3].count= res.rows.reduce((acc, row) => row.status == 105 ? acc + 1 : acc, 0);
				this.myList[4].count = res.rows.reduce((acc, row) => 
				  (row.status == 104 || row.status == 103) ? acc + 1 : acc, 0);
				
				// if (res.code == 200) {
				// 	this.myList[2].count = res.rows.length;
				// }
				
			},


			//跳转编辑资料
			edit() {
				uni.navigateTo({
					url: `/My/editData/index`
				})
			},
			login() {
				uni.navigateTo({
					url: `/My/oneClicklogin/login`
				})
			},
			skip(item, index) {
				let url = ""

				if (this.token) {

					if (item.package) {
						if (item.title == '购物车') {
							url = `/integration/${item.package}/index?title=${item.title}`
						} else {
							
							url = `/My/${item.package}/index?status=${index}`
						}
						uni.navigateTo({
							url: url
						})
					} else {

					}
				} else {
					this.show = true;
				}



			},
			//跳转全部订单
			all() {
				if (this.token) {
					uni.navigateTo({
						url: `/My/order/index?status=0`
					})
				} else {
					this.show = true;
				}

			},
			isModal(item) {
				this.show = item;
			},




			open() {
				if (this.loginBtn != "登录") {
					this.show = true;
				} else {
					this.login();
				}

			},
			confirm() {
				uni.navigateTo({
					url: `/My/oneClicklogin/login`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 600rpx;
		background-size: 100% 100%;

		background-repeat: no-repeat;

		.box {
			padding: 0 24rpx;
		}

		.info {
			.info-text {
				margin-left: 16rpx;

				text {
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
				}

				view {
					margin-top: 5rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
				}
			}

			.info-img {
				display: flex;
				align-items: center;

				image {
					width: 112rpx;
					height: 112rpx;
					margin-right: 8rpx;
					border-radius: 50%;
				}


			}

			.info-right {
				background-color: #d9d9d9;
			}
		}

		.login_button {
			background: #FFFFFF;
			/* 按钮背景颜色 */
			color: #67343d;
			margin-top: 32rpx;
			text-align: center;
			border: none;
			/* 去掉边框 */
			border-radius: 16rpx;
			/* 圆角 */
			font-size: 16px;
			/* 字体大小 */
			cursor: pointer;
			/* 鼠标指针样式 */
			box-shadow: 0rpx 20rpx 40rpx 0rpx #F0EFE9;
		}

		.loginbtn {
			margin-top: 32rpx;
			padding: 15rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 20rpx 40rpx 0rpx #F0EFE9;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.btn {
				color: #67343d;
				text-align: center;

			}
		}

		.register {
			margin-top: 32rpx;
			padding: 24rpx 24rpx 14rpx 24rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 20rpx 40rpx 0rpx #F0EFE9;
			border-radius: 16rpx 16rpx 16rpx 16rpx;



			.list {
				margin-top: 24rpx;
				display: flex;
				justify-content: space-between;

				.list-item {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 22rpx;
					}

					text {
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}

			.list:first-child {
				margin-top: 0rpx;
			}

			.list:last-child {
				margin-bottom: 10rpx;
			}

			.register-title {
				font-family: MiSans, MiSans;
				font-weight: bold;
				font-size: 36rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title-right {
					width: 128rpx;
					justify-content: space-between;

					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #808080;

					.right-box {
						// margin-top: 0.5rpx;
					}

					// text {
					// 	margin-right: 4rpx;
					// }
				}
			}

			.outpatient-box {
				font-size: 24rpx;
				font-weight: 500;

				image {
					width: 64rpx;
					height: 64rpx;
					margin-bottom: 10rpx;
				}

				.grid-text {
					width: 150rpx;
					/* 设置固定宽度 */
					overflow: hidden;
					/* 隐藏溢出部分 */
					white-space: nowrap;
					/* 不换行 */
					text-overflow: ellipsis;
					/* 省略号 */
					text-align: center;
				}
			}

		}
	}

	.login-btn {
		font-weight: bold;
		margin-left: 15rpx;
	}
	::deep.u-badge{
		width: 32rpx !important;
		height: 32rpx !important;
		padding: 0 0 !important;
	}
	.connection-box{
		position: relative;
		.swipers-btn{
			height: 50rpx;
			width: 400rpx;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}
		
	}
</style>